<script type="text/x-template" id="simple-form-dialog">
    <Modal
        v-model="visible"
        :title="title"
        :mask="mask"
        :styles="{ top: top }"
        :width="width"
        :mask-closable="maskClosable"
        :draggable="draggable"
        :sticky="true"
        @on-cancel="onClickCancle">
        <div :style="{ 'max-height': maxHeight, 'overflow': 'auto', 'padding': '0 10px' }">
            <simple-form ref="SimpleForm" :lines="lines" />
        </div>
        <div slot="footer">
            <Button v-for="(b, idx) in buttons" :key="idx" :type="b.type" :loading="loading" @click="b.onClick">{{ b.label }}</Button>
        </div>
    </Modal>
</script>
<script>
    Vue.component('SimpleFormDialog', {
        template: '#simple-form-dialog',
        props: {
        },
        mounted() {
            bindButtonHandler(this, {
                'event.cancle': this.onClickCancle
            })
        },
        data () {
            return {
                visible: false,
                title: '新增',
                top: '10vh',
                width: 520,
                maxHeight: '50vh',
                mask: true,
                maskClosable: true,
                draggable: false,
                lines: [],
                buttons: [],
                options: {},
                loading: false,
            }
        },
        methods: {
            open(options, data = null) {
                debug('dialog', 'open', options)
                this.options = options
                this.setField('lines', options.lines)
                this.setField('title', options.title)
                this.setField('mask', options.mask)
                this.setField('maskClosable', options.maskClosable)
                this.setField('draggable', options.draggable)
                this.setField('width', options.width || 520)
                this.setField('top', options.top || '10vh')
                this.setField('maxHeight', options.maxHeight || '50vh')
                this.initFooterBtns()
                if(data) {
                    this.$refs.SimpleForm.init(options.lines, data)
                }
                this.visible = true
            },
            setField(key, n) {
                if(n === undefined) return
                this.$set(this, key, n)
            },
            initFooterBtns() {
                if(this.options.buttons && this.options.buttons.length == 0) return
                // console.log(this.options.buttons)
                this.buttons = this.options.buttons.map(b => {
                    return {
                        type: b.type,
                        label: b.label,
                        onClick: () => this.onClickButton(b, this.$refs.SimpleForm.getData())
                    }
                })
            },
            postBefore() {
                this.loading = true
            },
            postAfter(success) {
                this.loading = false
                if(!success) return
                this.$emit('confirm')
                this.visible = false
            },
            onClickCancle() {
                this.visible = false
                this._removeFromDocument && this._removeFromDocument()
            }
        }
    })
</script>
